<template>
	<div class="tab-control">
		<template v-for="(item, index) in titles" :key="index">
			<div class="tab-control-item" :class="{ active: currentIndex === index }" @click="itemClick(index)">
				<slot :item="item" :index="index">
					<span>{{ item }}</span>
				</slot>
			</div>
		</template>
	</div>
</template>

<script>
export default {
	props: {
		titles: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			currentIndex: 0,
		}
	},
	emits: ['tabItemClick'],
	methods: {
		itemClick(index) {
			this.currentIndex = index
			this.$emit('tabItemClick', index)
		},
	},
}
</script>

<style scoped>
.tab-control {
	display: flex;
	height: 44px;
	line-height: 44px;
}

.tab-control .tab-control-item {
	flex: 1;
	text-align: center;
}

.tab-control .tab-control-item:hover,
.tab-control .tab-control-item.active {
	border-bottom: 3px solid #f00;
}
</style>
